<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>

<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.idcode.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/memberdetail.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.idcode.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/api.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/memberMain.js"></script>

<script type="text/javascript">
$(function() {
	var memberLoginName= '${memberLoginName}';
	$('#member_login_name').val(memberLoginName);
	var validate = $("#change_password_form").validate({		 
		focusInvalid: true,
		rules: {			
			member_login_new_password: {
				required: true,
				minlength:6,
				maxlength:16				
			},
			confirm_new_password: {
				required: true,
				minlength:6,
				maxlength:16,
				equalTo: "#member_login_new_password"
			},
			captcha_code_input: {
				required: true,
				captcha: true
			}
		},
		messages: {						
			member_login_new_password: {
				required: "请输入新密码！",
				minlength: $.validator.format("密码不能小于{0}个字符！"),
				maxlength: $.validator.format("密码不能大于{0}个字符！")
			},
			confirm_new_password: {
				required: "请输入确认密码！",
				minlength: $.validator.format("确认不能小于{0}个字符！"),
				maxlength: $.validator.format("确认密码不能大于{0}个字符！"),
				equalTo: "两次输入密码不一致！"
			},
			captcha_code_input: {
				required: "请输入验证码！",
				captcha: "输入的验证码不正确！"
			}
		}
	});
	jQuery.validator.addMethod("captcha", function(value, element) {
	    return value.toLowerCase() == $.idcode.getCode().toLowerCase();
	}, "");
	
	 $('#member_login_old_password').blur(function(){
		 var paramData = {
			member_login_old_password: $("#member_login_old_password").val(),	
		};			
		 if($("#member_login_old_password").val() == ''){
			 $('#msgPassword').html('<font color="red">请输入原密码!</font>');	
		 }else{
			 var url = "${pageContext.request.contextPath}/api/MemberChangePasswordRegisAPI.json";
		        $.ajax({
		            type: "POST",
		            dataType: "json",
		            url: url,
		            param: {},
		            data: {
		            	param: JSON.stringify(paramData)
		            },
		            cache: false,
		            success: function(data, textStatus, jqXHR){	             	
		            	if(data.result == false){		            		
		            	    $('#msgPassword').html('<font color="red">原密码输入错误!</font>');			            			            				            			            		
		            	} else{
		            		$('#msgPassword').html('');	
		            	}           			            	
		            },
					error: function(jqXHR, textStatus, errorThrown) {					
					},
		            complete: function(){
		            }		        
           });	  
		 }					 
	});
	 
	$("#button_change_password").bind("click", function() {
		if (validate.form()) {
			if($("#member_login_old_password").val() == ''){
				 $('#msgPassword').html('<font color="red">请输入原密码!</font>');	
			 }else{
				var paramData = {
					member_login_name: $("#member_login_name").val(),
					member_login_old_password: $("#member_login_old_password").val(),
					member_login_new_password: $("#member_login_new_password").val(),
				};
		        var url = "${pageContext.request.contextPath}/api/MemberChangePasswordAPI.json";
		        $.ajax({
		            type: "POST",
		            dataType: "json",
		            url: url,
		            param: {},
		            data: {
		            	param: JSON.stringify(paramData)
		            },
		            cache: false,
		            success: function(data, textStatus, jqXHR){	   	            	
		            	window.location.href = "${pageContext.request.contextPath}/forward/login";	            	
		            },
					error: function(jqXHR, textStatus, errorThrown) {					
					},
		            complete: function(){
		            }
		        });
			 }
		}
	});
	
	$.idcode.setCode();
	
});
</script>
        <form id="change_password_form" method="post">
           <div class="panel" style="width:750px;height: 500px; border-radius:10px;margin-top: 15px; margin-left: 15px; border:1px solid #d4d4d4;" >
	           <div style="margin-top: 5px;padding-bottom: 5px;padding-left:15px; border-bottom:1px solid #d4d4d4;">
		           <span  style="font-size:15px;">修改密码</span> 
		        </div>
		        <div >
          <input type=hidden id="member_login_name" value='' />
            <table class="changePasswordTable">
              <tbody>
                <tr>
                  <th width="150" align="right">原密码</th>
                  <td width="750" style="padding-left: 10px;">
                    <input type="password" id="member_login_old_password" name="member_login_old_password" style="width: 260px;">
                    <label id="msgPassword" style="font-weight: bold;"></label>
                  </td>
                </tr>
                <tr>
                  <th align="right">新密码</th>
                  <td style="padding-left: 10px;">
                    <input type="password" id="member_login_new_password" name="member_login_new_password" style="width: 260px;" placeholder="6-16位字符，可使用字母、数字和符号的组合">
                  </td>
                </tr>
                <tr>
                  <th align="right">确认密码</th>
                  <td style="padding-left: 10px;">
                    <input type="password" id="confirm_new_password" name="confirm_new_password" style="width: 260px;" placeholder="请再次输入密码">
                  </td>
                </tr>
                <tr>
                  <th align="right">验证码</th>
                  <td style="padding-left: 10px;width:300px"><span id="idcode"></span></td>
                </tr>
				<tr>
                  <th align="right">&nbsp;</th>
                  <td style="padding-left: 10px;"><input type="button" id="button_change_password" value="提交" style="width: 110px; margin-left: 30px;"></td>
                </tr>
              </tbody>
            </table>
          </div>
	  </div>         
</form>
 